<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人财务 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'accent': '#EC4899', // Pink-500 for finance actions
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // gray-100 for card backgrounds
                        'text-muted-light': '#6B7280', // gray-500
                        'expense': '#EF4444', // Red-500 for expenses
                        'income': '#22C55E',  // Green-500 for income
                        'border-light': '#E5E7EB' // gray-200 for borders
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; /* base-100-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .bottom-nav {
            border-top: 1px solid #E5E7EB; /* border-light */
        }
        .nav-item.active i, .nav-item.active span {
            color: #10B981; /* primary color */
        }
        .transaction-item .amount.expense {
            color: #EF4444; /* expense color */
        }
        .transaction-item .amount.income {
            color: #22C55E; /* income color */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-base-content-light">个人财务</h1>
            <div>
                <button class="text-text-muted-light hover:text-primary">
                    <i class="fas fa-chart-pie"></i> <!-- Link to reports -->
                </button>
                <button class="ml-3 text-text-muted-light hover:text-primary" onclick="document.location.href='settings.html'">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
        <div class="mt-4 bg-neutral-light p-4 rounded-lg shadow space-y-3">
            <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
                <div>
                    <span class="text-text-muted-light">总资产:</span>
                    <span class="font-semibold text-green-500 block text-lg">¥ 150,000.00</span>
                </div>
                <div>
                    <span class="text-text-muted-light">总负债:</span>
                    <span class="font-semibold text-red-500 block text-lg">¥ 50,000.00</span>
                </div>
                <div>
                    <span class="text-text-muted-light">月主动收入:</span>
                    <span class="font-semibold text-income block">¥ 8,800.00</span>
                </div>
                <div>
                    <span class="text-text-muted-light">月被动收入:</span>
                    <span class="font-semibold text-income block">¥ 1,200.00</span>
                </div>
                <div>
                    <span class="text-text-muted-light">月总支出:</span>
                    <span class="font-semibold text-expense block">¥ 3,500.00</span>
                </div>
                <div>
                    <span class="text-text-muted-light">月现金流:</span>
                    <span class="font-semibold text-primary block text-lg">¥ 6,500.00</span>
                </div>
            </div>
            <div class="pt-2">
                <p class="text-xs text-text-muted-light">非工资收入占比 (被动收入 / 总收入): <span class="text-primary font-medium">12%</span></p>
                <div class="mt-1 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-primary" style="width: 12%;"></div>
                </div>
            </div>
        </div>


    <main class="flex-grow p-4 overflow-y-auto">
        <h2 class="text-md font-medium text-text-muted-light mb-3">财务活动记录</h2>
        <div class="space-y-3">
            <!-- Activity Item 1: Asset Purchase -->
            <div class="transaction-item bg-neutral-light p-3 rounded-lg shadow">
                <div class="flex items-center justify-between mb-1">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center mr-3">
                            <i class="fas fa-home text-blue-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-base-content-light">购买房产 - 幸福小区A栋</h3>
                            <p class="text-xs text-text-muted-light">资产购入・2023-10-15</p>
                        </div>
                    </div>
                    <span class="font-semibold text-gray-700">成本: ¥500,000</span>
                </div>
                <div class="text-xs text-text-muted-light pl-13">
                    <p>首付: <span class="text-expense">-¥150,000</span>, 贷款: <span class="text-red-500">¥350,000</span></p>
                    <p>月被动收入: <span class="text-income">+¥2,500</span> (租金), 月供: <span class="text-expense">-¥1,800</span></p>
                </div>
            </div>

            <!-- Activity Item 2: Passive Income -->
            <div class="transaction-item bg-neutral-light p-3 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-yellow-500/10 flex items-center justify-center mr-3">
                        <i class="fas fa-dollar-sign text-yellow-500"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-base-content-light">收到股息 - 大华公司</h3>
                        <p class="text-xs text-text-muted-light">被动收入・今日 09:30</p>
                    </div>
                </div>
                <span class="font-semibold amount income">+ ¥ 350.00</span>
            </div>

            <!-- Activity Item 3: Daily Expense -->
            <div class="transaction-item bg-neutral-light p-3 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center mr-3">
                        <i class="fas fa-utensils text-red-500"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-base-content-light">晚餐 - 海底捞</h3>
                        <p class="text-xs text-text-muted-light">日常支出・昨日 19:00</p>
                    </div>
                </div>
                <span class="font-semibold amount expense">- ¥ 288.00</span>
            </div>
            
            <!-- Activity Item 4: Salary Income -->
            <div class="transaction-item bg-neutral-light p-3 rounded-lg flex items-center justify-between shadow">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center mr-3">
                        <i class="fas fa-briefcase text-green-500"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-base-content-light">工资入账</h3>
                        <p class="text-xs text-text-muted-light">主动收入・3天前 10:00</p>
                    </div>
                </div>
                <span class="font-semibold amount income">+ ¥ 8,800.00</span>
            </div>

            <!-- Image from Pexels: https://www.pexels.com/photo/person-holding-a-black-leather-wallet-and-a-smartphone-4386321/ -->
            <img src="https://images.pexels.com/photos/4386321/pexels-photo-4386321.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Wallet and phone" class="w-full h-32 object-cover rounded-lg mt-4 opacity-50">
        </div>

        <div class="fixed bottom-16 right-4 z-20">
            <button onclick="document.location.href='finance_create.html'" class="bg-accent hover:bg-pink-600 text-white font-bold w-14 h-14 rounded-full flex items-center justify-center shadow-lg">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>
    </main>

    <nav class="bottom-nav bg-base-100-light p-3 flex justify-around items-center sticky bottom-0 z-10 border-t border-border-light">
        <a href="home_habits.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-check-double text-xl"></i>
            <span class="text-xs mt-1">习惯</span>
        </a>
        <a href="home_todos.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-list-ul text-xl"></i>
            <span class="text-xs mt-1">待办</span>
        </a>
        <a href="home_finance.html" class="nav-item active flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-wallet text-xl"></i>
            <span class="text-xs mt-1">财务</span>
        </a>
        <a href="home_stats.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-chart-line text-xl"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
    </nav>

</body>
</html>